<template>
	<view class="statistics-wrap">
		<view class="statistics-top">
		<sub-navigation v-if="orgLv!=='jxs'&&orgLv!=='dxy'">
			<text class="h2 " >级别选择</text>
			<view class="flex-row flex-c-center " @tap="lvlPopupShow=true">
				<text class="h3-g lvllabel" >{{lvlName}}</text>
				<i class="iconfont iconxiangyou"></i>
			</view>
		</sub-navigation>
		<!-- chart -->
		<view class="as-charts flex-column flex-c-stretch">
			<view class=" flex-row flex-m-between head-title" >
				<text class="h2 p">销售记录</text>
				<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="datePopupShow=true"></image>
			</view>
			<scroll-view  v-if="num>0"  class="scroll-view_H" scroll-x="true" >
				<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red" > -->
					<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{width:chartWidth+'px'}" class="charts"></canvas>
				<!-- </view> -->
			</scroll-view>
			<!-- <canvas v-if="chartData&&chartData.amount.length>0" canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas> -->
			<text v-if="num===0" class="chart-empty-tip ">暂无数据</text>
		</view>
		<!-- 概览 -->
		<view class="as-cell flex-column flex-c-stretch u-m-b-20">
			<text class="h2 p u-m-b-20 flex-self-start">总销售业绩</text>
			<view class="flex-row flex-m-between">
				<view class="flex-column flex-c-center info-row"  v-for="(item,index) in allTitleList" :key="index">
					<text class=" flex25 h3 fw f32" >{{ chartData&&chartData.hasOwnProperty(allKeyList[index])?(index===3?formatRMB(chartData[allKeyList[index]]):chartData[allKeyList[index]]):0}}</text>
					<text class=" flex25 h5-g" >{{item}}</text>
				</view>
			</view>
		</view>
		</view>
		<!-- table -->
		<mescroll-uni :top="scrollTop" ref="mescrollRef" @up="loadList" @init="mescrollInit"  @down="downCallback" :up="upOption">
			<template  >
				<view class="as-list">
					<view class="tools-view">
						<text class="h2 p">日销售业绩</text>
					</view>
					<view class="flex-row flex-m-between">
						<!-- <text class=" cell h5-g flex20"   v-for="(item,index) in columnTitleList" :key="index">{{item}}</text> -->
						<text class=" cell h5-g flex30" >时间</text>
						<text class=" cell h5-g flex15" >顾客</text>
						<text class=" cell h5-g flex15" >产品</text>
						<text class=" cell h5-g flex20" >订单</text>
						 <text class=" cell h5-g flex20" >金额</text>
					</view>
					<view v-for="(item,index) in dataList" :key="index"  class="flex-row flex-m-between flex-c-center neumorphism info-row">
						<text class=" flex30 h3 ">{{item.date||''}}</text>
						<text class=" flex15 h3" >{{item.memberNum}}</text>
						<text class=" flex15 h3" >{{item.goodNum}}</text>
						<text class=" flex20 h3" >{{item.orderNum}}</text>
						<text class=" flex20 h3" >{{formatRMB(item.amount)}}</text>
					</view>
				</view>
			</template>
			
		</mescroll-uni>
		<date-popup @determine='determine' :beginDate="beginDate" :endDate="endDate"  :popupShow='datePopupShow' @colosePopup='datePopupShow=false'></date-popup>
	<!-- 	<mx-date-picker :show="datePopupShow"  type="range" :value="dateValue" :show-tips="true"
			:show-seconds="true" @confirm="onSelected" @cancel="onSelected" /> -->
		<lvl-picker :popupShow="lvlPopupShow" @change="changeLvl" @search="doSearchByLvl" @colosePopup="lvlPopupShow=false">
		</lvl-picker>
		<tui-modal></tui-modal>
		
	</view>
</template>

<script>
	import uCharts from  '@/packageC/static/u-charts/u-charts.js';
	import subNavigation from '../../components/sub-navigation/sub-navigation.vue';
	import lvlPicker from '../../components/lvl-picker/lvl-picker.vue';
	// import MxDatePicker from "@/packageC/components/mx-datepicker/mx-datepicker.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import chartMixin from "../../common/chart-mixin/chart-mixin.js";
	import datePopup from "../../components/char-date-picker/chart-date-picker.vue";
	
	var canvaColumn=null;
	export default {
		mixins: [MescrollMixin,chartMixin],
		data() {
			return {
				num:10,
				allTitleList:["总顾客数","总产品数","总订单数","总金额(元)"],
				allKeyList:["memberTotal","goodsTotal","orderTotal","amountTotal"],
				// columnTitleList:["时间","顾客","产品","订单","金额"],
				chartData:{},
				dataList:[],
				beginDate:null,
				endDate:null,
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5,
				},
				scrollTop:'810',
			};
		},
		components:{
			subNavigation,
			lvlPicker,
			// MxDatePicker,
			datePopup
		},
		computed:{

		},
		onLoad() {
			// this.orgLv = uni.getStorageSync('orgLv')
			
			let today = this.$util.getYearMonthDay(new Date())
			let lastWeek =this.$util.getYearMonthDay(new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000)) // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
			this.beginDate = lastWeek
			this.endDate = today
			this.dateValue = [this.beginDate,this.endDate]
			
			console.log("begin end",this.dateValue);
			
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.$nextTick(()=>{
				uni.getSystemInfo({
					success: (res) => {
						console.log("getSystemInfo res",res,res.windowWidth,res.windowHeight)
						this.chartWidth = res.windowWidth*0.9
						this.chartHeight = res.windowWidth*0.9*2/3
						this.loadChartData();
					}
				})
			})
			
			if(this.orgLv!=='jxs'&&this.orgLv!=='dxy'){
				this.scrollTop='910'
			}
		},
		methods: {
			
			loadList(page) {
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					current: page.num,
					pageSize: page.size,
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
					
				};
				console.log("begin end2",this.dateValue);
				this.$http.getSaleChartList(params).then((res) => {
					if(res.status === 0&&res.data) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.dataList= []
						};
						this.dataList = this.dataList.concat(curPageData);
					}else{
						this.mescroll.endSuccess(0);
						this.mescroll.endErr();
						// uni.showToast({
						// 	icon: 'none',
						// 	title:res.message,
						// 	duration:2000
						// })
					}
				})
							
			},
			loadChartData(){
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
				};
				this.$http.getSaleChart(params).then(res=>{
					console.log("getSaleChart===",res)
					if (res.status == 0&&res.data) {
						let Column={categories:[],series:[]};
						this.chartData = res.data
						Column.categories=  this.chartData.date||[]
						Column.series[0]={
							name: '',
							data: this.chartData.amount||[]
							// color: '#00FF00'
						}
						this.showColumn("canvasColumn",Column)
					} 
				})
			},
			showColumn(canvasId,chartData){
				var num = chartData.categories.length;
				this.num = num
				this.chartWidth =  num>=6?uni.upx2px(num * 125):uni.upx2px(6 * 125*0.9)
				canvaColumn=new uCharts({
					$this:this,
					canvasId: canvasId,
					type: 'area',
					fontSize:11,
					legend:{show:false},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						axisLabel:{
							// interval:0,
							formatter: function (value, index) {
								console.log("!!!!!!!!!!value%%%%%%%",value);
								  if(value.length>10){
									return value.substr(0,5)+'...'
								  }else{
									return value
								  }
							}
						}
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:0,
						// max:180,
						// title:"人民币",
						// format:(val)=>{return val.toFixed(0)+'元'},
						"showTitle": true,
						 "data": [
								{
									"position": "left",
									"disabled": false,
									"axisLine": true,
									"axisLineColor": "#CCCCCC",
									"calibration": false,
									"fontColor": "#666666",
									"fontSize": 13,
									"textAlign": "right",
									"title": "人民币(元)",
									"titleFontSize": 13,
									"titleFontColor": "#666666",
									"min": 0,
									"max": null,
									"tofix": null,
									"unit": "",
									"format": ""
								},
								]
					},
					width: this.chartWidth,
					height: this.chartHeight,
					// extra: {
					// 	line:{
					// 		type: 'straight'
					// 	}
					// },
					extra:{
						area:{
							type:'curve',
							addLine:true,
							gradient:false,
							opacity:0,
							},
						}
				});
			},
		},
	}
</script>

<style lang="scss">
	 @import "../../common/statistics.scss";
	.charts{
		// width: 90vw; 
		// height:90vw*2/3;
		width: 100vw;
		height: 100%;
		background-color: #FFFFFF;
	}
</style>
